<template>
  <div class="container">
    <!-- 顶部搜索框 -->
    <div class="search">
        <div class="search-input">
          <icon size="16" type="search" @tap="handleSearch" />
          <input @input="handleInput" placeholder="请输入商品" :value="inputValue" confirm-type="search" @confirm="handleSearch"/>
        </div>
      <span
        class="cancel"
        v-if="inputValue"
        @tap="handleCancel"
      >取消</span>
    </div>
    <div class="search-title">
      <div>历史搜索</div>
      <icon type="cancel" size="14" color="#666" @tap="handleClear"></icon>
    </div>
    <div class="history">
      <div
        class="history-item"
        v-for="(item,index) in history"
        :key="index"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
// 页面功能
// 1.监听输入框事件，如果有值，把取消按钮显示出来
// 2.点击取消时候，把输入框的内容清空
// 3.给左侧搜索按钮（还有键盘上的）添加点击事件
// 4.把关键字放到历史搜索
// 5.清空输入框
// 6.历史记录不能重复
export default {
  data () {
    return {
      // 输入框初始值
      inputValue:'',
      // 获取本地的数据
      history:wx.setStorageSync('history') || [],
    }
  },
  methods: {
    // 输入框事件
    handleInput(event){
      // 获取输入框的值
      // console.log(event);
      const {value} = event.target;
      // 赋值给data里的变量
      this.inputValue = value;
    },
    // 点击取消触发事件
    handleCancel(){
      // 把data里输入框值清空--inputValue需要跟input的value值关联起来
      this.inputValue = ""
    },
    // 跳转到搜索列表页
    handleSearch(){
      
      if(this.inputValue.trim()){
      // 把关键字添加history
      this.history.unshift(this.inputValue)
      }
      console.log(new Set(this.history));
      // 数组去重,先转换成set对象，再把set对象解构成普通数组
      this.history = [...new Set(this.history)];

      // 存在本地
      wx.setStorageSync('history',this.history)

      wx.navigateTo({
        url:`/pages/goods_list/main?keyword=${this.inputValue}`
      })
      // 设置输入框的值为空
      this.inputValue = '';
    },
    // 清空本地存储
    handleClear(){
      wx.removeStorageSync("history");
      this.history = [];
    }
  }
}
</script>

<style scoped lang="scss">
  @import "style.scss";
</style>
